<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框和背景颜色</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    main{
        margin: 20px;
    }
    span{
        width: 125px;
        height: 110px;
        margin: 5px;
        display: inline-block;
        background-color: whitesmoke;
    }
</style>
<body>
    
    <main>
        <span alt="边框" class="border"></span>
        <span alt="边框" class="border-top"></span>
        <span alt="边框" class="border-bottom"></span>
        <span alt="边框" class="border-left"></span>
        <span alt="边框" class="border-right"></span>

        <br>

        <span alt="边框" class="border border-0"></span>
        <span alt="边框" class="border border-top-0"></span>
        <span alt="边框" class="border border-bottom-0"></span>
        <span alt="边框" class="border border-left-0"></span>
        <span alt="边框" class="border border-right-0"></span>

        <br>

        <span alt="边框" class="border border-primary"></span>
        <span alt="边框" class="border border-secondary"></span>
        <span alt="边框" class="border border-success"></span>
        <span alt="边框" class="border border-danger"></span>
        <span alt="边框" class="border border-warning"></span>
        <span alt="边框" class="border border-info"></span>
        <span alt="边框" class="border border-dark"></span>

        <br>

        <span alt="边框" class="border border-secondary rounded"></span>
        <span alt="边框" class="border border-secondary rounded-top"></span>
        <span alt="边框" class="border border-secondary rounded-right"></span>
        <span alt="边框" class="border border-secondary rounded-bottom"></span>
        <span alt="边框" class="border border-secondary rounded-left"></span>
        <span alt="边框" class="border border-secondary rounded-circle"></span>
        <span alt="边框" class="border border-secondary rounded-pill"></span>
        <span alt="边框" class="border border-secondary rounded-0"></span>

        <br>

        <span alt="边框" class="border border-secondary rounded-sm"></span>
        <span alt="边框" class="border border-secondary rounded-lg"></span>

        <br>

        <p class="text-primary">.text-primary</p>
        <p class="text-secondary">.text-secondary</p>
        <p class="text-success">.text-success</p>
        <p class="text-danger">.text-danger</p>
        <p class="text-warning">.text-warning</p>
        <p class="text-info">.text-info</p>
        <p class="text-light bg-dark">.text-light</p>
        <p class="text-dark">.text-dark</p>
        <p class="text-body">.text-body</p>
        <p class="text-muted">.text-muted</p>
        <p class="text-white bg-dark">.text-white</p>
        <p class="text-black-50">.text-black-50</p>
        <p class="text-white-50 bg-dark">.text-white-50</p>

        <br>

        <a class="text-primary">.text-primary</a>
        <a class="text-secondary">.text-secondary</a>
        <a class="text-success">.text-success</a>
        <a class="text-danger">.text-danger</a>
        <a class="text-warning">.text-warning</a>
        <a class="text-info">.text-info</a>
        <a class="text-light bg-dark">.text-light</a>
        <a class="text-dark">.text-dark</a>
        <a class="text-body">.text-body</a>
        <a class="text-muted">.text-muted</a>
        <a class="text-white bg-dark">.text-white</a>
        <a class="text-black-50">.text-black-50</a>
        <a class="text-white-50 bg-dark">.text-white-50</a>

        <br>

        <div class="p-1 mb-2 bg-primary text-white">.bg-primary</div>
        <div class="p-1 mb-2 bg-secondary text-white">.bg-secondary</div>
        <div class="p-1 mb-2 bg-success text-white">.bg-success</div>
        <div class="p-2 mb-2 bg-danger text-white">.bg-danger</div>
        <div class="p-2 mb-2 bg-warning text-dark">.bg-warning</div>
        <div class="p-2 mb-2 bg-info text-white">.bg-info</div>
        <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
        <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
        <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
        <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

        <div class="p-5 mb-2 bg-success test-primary">内边距5,下外边距2,背景为成功类型, 文字为主要类型</div>
    </main>

    <script src="../js/bootstrap.js"></script>
</body>
</html>